<!-- 临时场地使用记录 -->
<template>
  <div>
    <el-table :data="m_TableData" style="width: 100%" :border="true">
      <el-table-column v-for="(col, i) in Columns" :key="i" :prop="col.prop" :label="col.label" :width="col.width ? col.width : null" :align="col.align ? col.align : null" :min-width="col.minwidth ? col.minwidth : null">
        <template slot-scope="scope">
          <div style="cursor: pointer" v-if="col.prop == 'action'"></div>
          <div v-else>
            {{ col.customRender ? col.customRender(scope.row, scope.row[col.prop]) : scope.row[col.prop] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center; margin-top: 20px; display: flex; justify-content: flex-end">
      <el-pagination background layout="total, prev, pager, next" :total="m_QueryParams.total" :current-page.sync="m_QueryParams.currentPage" :page-size="m_QueryParams.pageSize" @current-change="currentchange"> </el-pagination>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import Api from '../../../api/clientManage';
export default {
  components: {},
  data() {
    return {
      m_QueryParams: { total: 0, currentPage: 1, pageSize: 10 },
      m_TableData: [],
    };
  },
  filters: {
    nullVal: function (msg) {
      return msg ? msg : '-';
    },
  },
  //监听属性 类似于data概念
  computed: {
    Columns() {
      let align = 'center';
      let width = null;
      let columns = [
        {
          label: '项目名称',
          prop: 'projectName',
          align: align,
          width: width,
        },
        {
          label: '事项',
          prop: 'itemDesc',
          align: align,
          width: width,
        },
        {
          label: '使用区域',
          prop: 'rentArea',
          align: align,
          width: width,
        },
        {
          label: '开始时间',
          prop: 'contractBeginDate',
          align: align,
          width: width,
          customRender: function (row, text) {
            if (text) return dayjs(text).format('YYYY-MM-DD');
          },
        },
        {
          label: '结束时间',
          prop: 'contractEndDate',
          align: align,
          width: width,
          customRender: function (row, text) {
            if (text) return dayjs(text).format('YYYY-MM-DD');
          },
        },
        {
          label: '总金额',
          prop: 'amountReceivable',
          align: align,
          width: width,
        },
        {
          label: '状态',
          prop: 'contractStatus',
          align: align,
          width: width,
          customRender: function (row, text) {
            if (text == 0) return '草稿';
            if (text == 1) return '审批中';
            if (text == 2) return '履行中';
            if (text == 3) return '驳回';
            if (text == 4) return '履行完毕';
            if (text == 5) return '已废止';
            return '-'
          },
        },
      ];
      return columns;
    },
  },
  //方法集合
  methods: {
    getInfo() {
      Api.queryField({ customerKey: this.$route.query.customerKey, ...this.m_QueryParams }).then(res => {
        this.m_TableData = res.rows;
        this.m_QueryParams.total = res.total;
      });
    },
    currentchange(res) {
      this.getInfo();
      this.m_QueryParams.currentPage = res;
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>